<template>
	<view class="totals">
		<view class="num-block" v-for="(childs, index) in linList" :key="index">
			<view class="num-block-item">
				<view class="num">{{ childs[0].val || 0 }}</view>
				<view class="name">{{ childs[0].name }}
					<zb-tooltip v-if="childs[0].name == '已保养作业工单数'" placement="top" ref="tooltip">
						<image class="msg" src="@/static/images/msg.png"></image>
						<view class="tips" slot="content">
							<view class="">已保养作业工单数:计划日期在统计周期内保养工单已提交任务，则视为“已完成保养作业”。</view>
						</view>
					</zb-tooltip>
				</view>
			</view>
			<view class="line" v-if="childs[1]"></view>
			<view class="num-block-item" v-if="childs[1]">
				<view class="num">{{ childs[1].val || 0 }}</view>
				<view class="name">{{ childs[1].name }}
					<zb-tooltip v-if="childs[1].name == '工单平均作业人工时(分钟)'" placement="top-end" ref="tooltip">
						<image class="msg" src="@/static/images/msg.png"></image>
						<view class="tipsContent" slot="content">
							<view class="">工单平均作业人工时=累计保养作业人工时总和÷保养作业工单数量。</view>
							<view class="">示例：</view>
							<view class="">团队统计：10张保养工单，总人工时为50人小时→平均5人小时/单。</view>
							<view class="">个人统计：员工A参与5单，个人累计人工时20人小时→平均4小时/单</view>
						</view>
					</zb-tooltip>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	props: {
		list: {
			type: Array,
			default: () => {
				return [];
			}
		}
	},
	data() {
		return {};
	},
	computed: {
		linList() {
			let arr = [];
			let childs = [];
			for (let i = 0; i < this.list.length;) {
				childs.push(this.list[i]);
				if (childs.length == 2 || i == this.list.length - 1) {
					arr.push([...childs]);
					childs = [];
				}
				i++;
			}
			return arr;
		}
	}
};
</script>

<style lang="scss" scoped>
.totals {
	padding-top: 20rpx;
}

.msg {
	width: 30rpx;
	height: 30rpx;
	margin-left: 8rpx;
	padding-top: 5rpx;
}

/deep/ .zb_tooltip__popper {
	z-index: 99;
}

.tipsContent {
	width: 600rpx;
	text-align: left;
	white-space: pre-line;
	word-break: break-all;
}

.tips {
	width: 400rpx;
	text-align: left;
	white-space: pre-line;
	word-break: break-all;
}

.num-block {
	width: 100%;
	display: flex;
	align-items: center;
	padding: 20rpx 0;

	.line {
		width: 2rpx;
		height: 60rpx;
		background-color: #eee;
	}

	&-item {
		flex: 1;
		text-align: center;

		.num {
			font-size: 36rpx;
			font-weight: bold;
			color: #333;
		}

		.name {
			font-size: 26rpx;
			padding-top: 5rpx;
			color: #999999;
			display: flex;
			justify-content: center;
			align-items: flex-start;
		}
	}
}
</style>
